<template>
  <!--多选题-->
  <view class="Question f_1 scroll-y">
    <view class="title-box">
      <text class="typeName" :style="{fontSize: fontSize+'rpx'}">多选题</text>
      <text class="title" :style="{fontSize: fontSize+'rpx'}">{{ answerNumber }}、{{ item.itemText }}</text>
    </view>
    <view class="options-box">
      <view class="option flex item-center" v-for="(opetion,index) in item.selections" :key="index"
            @click.stop="itemClick(opetion)">
        <u-icon customStyle="margin-right: 14px;" name="checkmark-circle-fill" size="24" color="#37B874"
                v-if="selectVal.includes(opetion.code)"></u-icon>
        <text v-else>{{ opetion.code }}</text>
        <view class="option-label" :style="{fontSize: fontSize+'rpx'}">{{ opetion.context }}</view>
      </view>
      <view class="save-btn" v-if="!item.hasAnswer && showAnswer" @click="submit">查看答案</view>
    </view>
    <!--显示答案区域答题模式下展示---->
    <view class="answer flex" v-if="showAnswer && item.hasAnswer" :style="{fontSize: fontSize+'rpx'}">
      <view>正确答案：&nbsp;<label>{{ answer.join("、") }}</label></view>
      <view>您的选择：&nbsp;<label :class="{error:!item.correct}">{{ selectVal.join("、") }}</label></view>
    </view>

    <!--查询模式下展示-->
    <view class="answer" v-if="disabled" :style="{fontSize: fontSize+'rpx'}">
      <view class="flex between">
        <view>正确答案：&nbsp;<label>{{ answer.join("、") }}</label></view>
        <view>您的选择：&nbsp;<label :class="{error:!item.correct}">{{ selectVal.join("、") }}</label></view>
      </view>
      <view class="flex score" v-if="isShowScore">
        <view>分值：&nbsp;<label>1</label></view>
        <view>得分：&nbsp;<label>1</label></view>
      </view>
    </view>

    <!--试题解析-->
    <AnswerAnalysis v-if="showAnswer && item.hasAnswer" :analysis="item.analysis"></AnswerAnalysis>
  </view>

</template>
<script>
import AnswerAnalysis from "../AnswerAnalysis.vue";

export default {
  name: "MultipleQuestion",
  components: {AnswerAnalysis},
  props: {
    fontSize: {
      type: Number,
      default: 32,
    },
    item: {
      type: Object,
      required: true
    },
    answerNumber: {
      type: Number,  //题目序号
      default: 1
    },
    showAnswer: {
      type: Boolean,  //是否显示答案
      default: false
    },
    //是否展示分数
    isShowScore: {
      type: Boolean,
      default: false
    },
    //是否禁用点击事件
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectVal: [],
      answer: []
    }
  },
  methods: {
    itemClick(item) {
      //已答题或者禁用
      if (this.hasAnswer || this.disabled) {
        return;
      }
      const index = this.selectVal.indexOf(item.code);
      if (index !== -1) {
        //取消选择
        this.selectVal.splice(index, 1);
      } else {
        this.selectVal.push(item.code)
      }
      //更新选择答案
      const stuAnswer = JSON.parse(JSON.stringify(this.selectVal)).join(",");
      this.$emit("updateAnswers", {index: this.answerNumber - 1, stuAnswer, submit: false})
    },
    submit() {
      if (this.hasAnswer) {
        return;
      }
      if (!this.selectVal.length) {
        uni.showToast({
          title: "请输入答案",
          icon: "none",
          duration: 2000
        });
        return
      }
      const stuAnswer = JSON.parse(JSON.stringify(this.selectVal)).join(",");
      this.$emit("updateAnswers", {index: this.answerNumber - 1, stuAnswer, submit: true})
    }
  },
  created() {
    this.answer = this.item.answer.split(",") //将正确答案转换成数组
    this.selectVal = this.item.stuAnswer ? this.item.stuAnswer.split(",") : []
  }
}
</script>

<style scoped lang="scss">
.Question {
  padding: 18px;

  .typeName {
    border: 1px solid #37B874;
    box-sizing: border-box;
    border-radius: 20px 20px 20px 0;
    padding: 5rpx 15rpx;
    background-color: #F3FBF7;
    display: inline-block;
    height: fit-content;
    margin-right: 8px;
  }

  .title {
    color: #333333;
    line-height: 24px;
  }

  .options-box {
    margin-top: 40px;
    padding: 0 2px;

    .option {
      text {
        background-color: #EAEAEA;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 23px;
        border-radius: 50%;
        color: #333333;
        font-size: 15px;
        margin-right: 14px;
      }

      .option-label {
        color: #333333;
      }

      & + .option {
        margin-top: 30px;
      }
    }

    .save-btn {
      background-color: #37B874;
      width: 80px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      border-radius: 12px;
      font-size: 14px;
      color: #FFFFFF;
      margin: 16px auto;
    }
  }

  .answer {
    background: linear-gradient(180deg, #FBFFFB 0%, #F6FFF7 100%);
    border-radius: 12px;
    padding: 14rpx 40rpx;
    margin-top: 40px;

    label {
      color: #37B874;
    }

    .error {
      color: #FF3D31;
    }

    > view:nth-child(1) {
      margin-right: 24px;
    }
    .user-option, .score {
      > view:nth-child(1) {
        margin-right: 24px;
      }
    }

    .score {
      margin-top: 12px;
      font-size: 14px;
      label {
        color: #333333 !important;
      }
    }

  }
}

</style>